import { useState, forwardRef } from "react";
import { View, Form, Input, Button, Image } from "@tarojs/components";
import { useAuth } from "@/store/authContext";
import { formatLocaleDateText, formatDate } from "@/utils/dateTimeFormatHelpers";
import CCalendar from "@/../packages/custom-calendar-taro/";
import styles from "./index.module.scss";
import { IProps } from "@/../packages/custom-calendar-taro/src/components/Calendar";

interface CalendarProps extends Pick<IProps, "onSelectDate"> {
  canExpand?: boolean;
  view?: "week" | "month";
  range?: boolean;
  toggleCallback?: Function;
  onChangeMonthCallback?: (value: string) => any;
  onDayClick?: any;
}

const Calendar = forwardRef(
  (
    {
      canExpand = false,
      view = "month",
      range = false,
      onSelectDate,
      toggleCallback,
      onChangeMonthCallback,
      onDayClick,
    }: CalendarProps,
    ref: any
  ) => {
    const [mode, setMode] = useState(view);
    const today: string = formatDate(new Date());
    const text = (currentView: Date) => {
      //onChangeMonthCallback && onChangeMonthCallback(currentView)
      return formatLocaleDateText(currentView);
      // return currentView.toLocaleDateString("zh-CN", {
      //   year: "numeric",
      //   month: "numeric",
      // });
    };
    const toggleCollapse = () => {
      let newMode: "week" | "month" = mode === "month" ? "week" : "month";
      toggleCallback && toggleCallback()
      setMode(newMode);
    };

    return (
      <View
        className={`${styles["calendar"]} ${
          mode === "month" ? styles["expanded"] : ""
        }`}
      >
        {canExpand && (
          <View className={styles["toggle"]} onClick={toggleCollapse}></View>
        )}
        <CCalendar
          ref={ref}
          view={mode}
          isSwiper={false}
          isMultiSelect={range}
          //hideArrow
          //hideController
          minDate={today}
          //maxDate="2023-01-01"
          //minDate="2022-10-21"
          //maxDuration={90}
          selectedDateColor="#00A4B6"
          pickerTextGenerator={text}
          startDay={1}
          onSelectDate={onSelectDate}
          onDayClick={onDayClick && onDayClick}
          onDayLongPress={onDayClick && onDayClick}
          onCurrentViewChange={onChangeMonthCallback}
        />
      </View>
    );
  }
);

export default Calendar;
